<template>
    <div class="home-contain">
        <V-Header></V-Header>
        <div class="el-main">
           <!-- 问题 -->
           <div class="detail-qustion">
               <h3 class="detail-title">提出的问题</h3>
               <div class="main-item">
                    <div class="article-author">
                        <img  src="../assets/images/head.png" alt="author" class="article-picture">
                        <span class="name">作者：{{user.username}}</span>
                        <span class="position">职位：{{user.position}}</span>
                        <span class="sex" v-if="user.gender !== 'female'">是个小姐姐诶</span>
                        <span class="sex" v-else>是个小帅锅诶</span>
                    </div>
                    <h3 class="article-title">
                        {{datareAcct.title}}
                    </h3>
                    <div class="article-content">
                    {{datareAcct.content}}
                    </div>
                    <div class="article-reviews">
                        <span class="zan" :class="{zaned:like}" @click.stop="addLikeNum()">👍 {{likeNum}}</span>
                        <span class="comment">评论数：<span class="num">{{datareAcct.solutionNum}}</span>条</span>
                        <span class="time">{{datareAcct.createTime}}</span>
                    </div>
            </div>
           </div>
           <!-- 评论 -->
           <div class="details-comment">
               <div class="answer">
                 <h3 class="detail-answer">回的答案</h3>
                 <div class="answer-right">
                     <p class="text-tip">有不同意见？就去说说你的意见=></p>
                      <el-button type="success" @click="centerDialogVisible = true">发布你的回答</el-button>
                 </div>
               </div>
               <div class="comment-content">
                    <comment-item v-for="(item,index) of datarePerms" :key="index" :item="item" @refurbishedDetails='refurbishedDetails'></comment-item>
               </div>
           </div>
        </div>
        <!-- 模态框 -->
        <el-dialog title="写下你的答案" :visible.sync="centerDialogVisible" center width="30%">
            <el-form :model="form" :rules="rules" ref="form" >
                <div class="question-title">答案内容</div>
                <div class="form-item" >
                    <el-form-item prop="textarea">
                      <el-input  type="textarea" :rows="4" placeholder="请输入内容" v-model="form.textarea"></el-input>
                   </el-form-item>
                </div>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="FormVisibleData('form')">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import VHeader from "@/components/header";
import listItem from "@/components/listItem";
import commentItem from "@/components/commentItem";
import { mapState, mapMutations } from "vuex";
import axios from 'axios';
 

export default {
  name: "detail",
  data() {
    return {
      centerDialogVisible: false,
      form: {
        textarea: ""
      },
      rules: {
        textarea: [
          { required: true, message: "请输入你的答案", trigger: "blur" }
        ]
      },
      datareAcct: {},
      datarePerms:{},
      user: {},
      likeNum: 0,
      like:''
    };
  },
  methods: {
    FormVisibleData(form) {
      let solutionData = {
        userId: localStorage.userId,
        questionId: this.$route.params.questionId,
        content: this.form.textarea
      };
      this.$refs[form].validate(valid => {
        if (valid) {
          this.axios
            .post("/homeApl/solution", solutionData)
            .then(response => {
              if (response.data.code == 0) {
                this.centerDialogVisible = false;
                this.getDetailsData();
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getDetailsData() {
        let _this = this;
        function  getDetailsQustion(){
          return axios.get("/homeApl/question/" + _this.$route.params.questionId);
          };
        function  getDetailsSolutions(){
            return axios.get("/homeApl/solution/all?questionId=" + _this.$route.params.questionId);
          };

      this.axios.all([getDetailsQustion(), getDetailsSolutions()])
        .then(this.axios.spread( (acct, perms) => {
          if(acct.data.code == 0){
            this.datareAcct = acct.data.result;
            this.user = acct.data.result.user;
            this.likeNum = acct.data.result.questionLikeCount.likeNum;
            this.like = acct.data.result.questionLikeCount.like;
            this.form.textarea = "";
            this.changeRole();
            this.changeName(localStorage.username);
          }
          if(perms.data.code == 0){
             this.datarePerms = perms.data.result;            
          }
        }));
    },
    addLikeNum() {
        this.axios
          .post("/homeApl/questionlike/", {
            userId: localStorage.userId,
            questionId: this.$route.params.questionId
          })
          .then(response => {
            if (response.data.code == 0) {
             this.getDetailsData();
            }
          })
          .catch(error => {
            console.log(error);
          });
    },
    refurbishedDetails() {
      this.getDetailsData();
    },
    ...mapMutations(["changeRole", "changeName"])
  },
  mounted() {
    this.getDetailsData();
  },
  components: {
    VHeader,
    listItem,
    commentItem
  }
};
</script>

<style scoped lang='scss'>
.home-contain {
  h3 {
    margin: 0px;
  }
  .question-title {
    text-indent: 10px;
    font-weight: bolder;
    font-size: 16px;
  }
  .form-item {
    margin: 10px 10px;
  }
  .el-main {
    margin: 70px auto;
    width: 1000px;
    overflow: inherit;
    // height: 3000px;
    padding: 0;
    // background: #ffffff;
    .detail-qustion {
      .main-item {
        background: #ffffff;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        margin: 20px auto;
        cursor: pointer;
        .article-author {
          height: 40px;
          line-height: 40px;
          position: relative;
          .article-picture {
            vertical-align: middle;
          }
          .name {
            margin: 0 10px;
          }
          .position {
            color: #2b27278f;
            margin-right: 10px;
          }
          .sex {
            color: #2a36c7;
          }
          .del {
            position: absolute;
            right: 10px;
            top: 0px;
            margin-right: 20px;
          }
        }
        .article-title {
          width: 100%;
          margin: 5px 0px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .article-content {
          letter-spacing: 1px;
          text-indent: 40px;
        }
        .article-reviews {
          height: 30px;
          line-height: 30px;
          margin: 10px 0px;
          position: relative;
          span {
            cursor: pointer;
          }
          .zan {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: rgba(0, 132, 255, 0.1);
            color: #2a36c7;
            border-radius: 4px;
          }
          .zaned {
            background: red;
            color: #ffffff;
          }
          .comment {
            margin: 0 20px;
            .num {
              color: red;
            }
          }
          .time {
            position: absolute;
            top: 0px;
            right: 20px;
            color: #b3a7a7;
          }
        }
      }
    }
    .details-comment {
      .answer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 40px;
        .answer-right {
          .text-tip {
            display: inline-block;
            color: red;
            margin: 0px;
          }
        }
      }
      .comment-content {
        // height: 600px;
        margin-top: 20px;
        border: 1px solid rgb(207, 192, 192);
      }
    }
  }
}
</style>